<template>
  <view>
    <view class="content">
      <view class="content-input">
        <image src="../../static/serach.png" />
        <input
          type="text"
          placeholder="输入客户名称或者工单号或者序号"
          v-model="hospitalName"
          placeholder-style="font-size: 28rpx;font-weight: 500;color: #C6C7CB;"
          value=""
          @input="handleSearch"
        />
      </view>

      <empty v-if="checkoutList.list.length == 0"></empty>
      <order-card :propsList="checkoutList" v-else></order-card>
    </view>
  </view>
</template>

<script>
import changetype from "../../utils/changetype.js";
import empty from "../../components/empty.vue";
import orderCard from "@/components/orderCard.vue";
export default {
  components: {
    orderCard,
    empty,
  },
  data() {
    return {
      hospitalName: "",
      page: 1,
      last_page: 1,
      checkoutList: {
        type: "checkout",
        list: [],
      },
    };
  },
  watch: {
    hospitalName(n, o) {
      this.page = 1;
      this.last_page = 1;
      this.checkoutList.list = [];
    },
  },
  methods: {
    jump_detail(id) {
      uni.navigateTo({
        url: "/pages/detail/detail?id=" + id,
      });
    },
    handleSearch() {
      this.page = 1;
      this.serachList();
    },
    serachList() {
      this.$https
        .post("/warranty/engineerList", {
          status: 4, //状态:1=进行中，2=质保期内，3=已完成， 0=指派给我,4 =全部   5待验收
          type: 3, //类型:3全部  0报修   1维保
          page: this.page,
          search: this.hospitalName,
        })
        .then((res) => {
          if (res.data.last_page > 0) {
            this.last_page = res.data.last_page;
            this.checkoutList.list =
              this.page == 1
                ? res.data.data
                : this.checkoutList.list.concat(res.data.data);
            this.checkoutList.list.forEach((item) => {
              item.type_data = changetype(item.type_data);
            });
          }
        });
    },
  },
  onReachBottom() {
    if (this.page != this.last_page) {
      this.page = this.page + 1;
      this.serachList();
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 28rpx 32rpx 200rpx;
  background-color: #f6f6fb;
  min-height: 100vh;
  margin-bottom: 40rpx;
  box-sizing: border-box;

  &-input {
    display: flex;
    align-items: center;
    height: 36rpx;
    background: #ffffff;
    border-radius: 44rpx;
    display: flex;
    padding: 26rpx 32rpx 26rpx 24rpx;
    margin-bottom: 26rpx;
    display: flex;
    align-items: center;

    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 34rpx;
    }

    input {
      flex: 1;
    }
  }
}
</style>
